<template>
  <!-- App -->
  <f7-page color-theme="blues" @page:beforein="pageIn">
    <f7-navbar>
      <f7-nav-left back-link="返回"></f7-nav-left>
    </f7-navbar>

    <div class="userinfor_head">
      <div class="userinfor_head_img">
        <img :src="fromUser.avatar" alt="" />
      </div>
      <div class="userinfor_head_info">
        <div class="info_box">
          <a href="#">
            {{ fromUser.nickName }}
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="user.sex == 0 ? '#icon-nan' : '#icon-nv'"></use>
            </svg>
          </a>
          <span>账号: {{ fromUser.userName }}</span>
        </div>
      </div>
    </div>

    <f7-list contacts-list>
      <f7-list-item title="电话号码">
        <div class="item-input">
          <input type="text" :value="fromUser.userName" disabled />
        </div>
      </f7-list-item>

      <f7-list-item title="个性签名">
        <div class="item-input">
          <input type="text" :value="fromUser.remark" disabled />
        </div>
      </f7-list-item>

      <f7-list-item group-title></f7-list-item>

      <f7-list-item title="圈子" @click="myspace">
        <div class="item-input">
          <img
            v-for="(item, index) in circle"
            :key="index"
            slot="media"
            :src="'/dev-api' + item.avatar"
            width="44"
          />
        </div>
      </f7-list-item>

      <f7-list-item group-title></f7-list-item>

      <!--  -->
      <f7-list-item v-if="showButton == 3">
        <div class="item-title" style="padding-bottom: 60px; overflow: visible">
          请求信息
        </div>
        <div class="item-inner" style="margin-left: 30px">
          <div class="item-input">
            <textarea
              style="color: #a3a3a3"
              name=""
              id=""
              cols="30"
              rows="10"
              v-model="fromUser.requestInfo"
              disabled
            ></textarea>
          </div>
        </div>
      </f7-list-item>

      <f7-list-item group-title></f7-list-item>
      <!-- 发消息 -->
      <f7-list-item v-if="showButton == 1">
        <div
          class="item-inner"
          style="align-items: center; justify-content: center; display: flex"
        >
          <f7-icon slot="media" icon="iconfont icon-pinglun"></f7-icon>
          <div>发消息</div>
        </div>
      </f7-list-item>
      <!-- 删除好友 -->
      <f7-list-item v-if="showButton == 1" @click="delUser">
        <div
          class="item-inner"
          style="align-items: center; justify-content: center; display: flex"
        >
          <f7-icon slot="media" icon="iconfont icon-shanchu1"></f7-icon>
          <div>删除好友</div>
        </div>
      </f7-list-item>
      <!-- 添加朋友 -->
      <f7-list-item v-if="showButton == 2">
        <div
          class="item-inner"
          style="align-items: center; justify-content: center; display: flex"
        >
          <f7-icon slot="media" icon="iconfont icon-xinzeng3"></f7-icon>
          <div @click="addFirend(0)">添加朋友</div>
        </div>
      </f7-list-item>
      <!-- 同意 -->
      <f7-list-item v-if="showButton == 3">
        <div
          class="item-inner"
          style="align-items: center; justify-content: center; display: flex"
        >
          <div @click="addFirend(1)">同意</div>
        </div>
      </f7-list-item>
      <!-- 拒绝 -->
      <f7-list-item v-if="showButton == 3">
        <div
          class="item-inner"
          style="align-items: center; justify-content: center; display: flex"
        >
          <div @click="applyClick(2)">拒绝</div>
        </div>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import store from "@/store";
import { mapState } from "vuex";
import {
  myRequestInfo,
  updateMyRequestInfo,
  selectUserByUserName,
  deleteBuddyInfo,
} from "@/api/IM/index.js";
export default {
  props: ["query", "isapply", "accountId", "back"],
  data() {
    return {
      fromUser: {},
      circle: [],
      showButton: 0,
      addorclick: 0,
      form: {
        replyInfo: "",
        replyAccountName: "",
        replyAccount: "",
      },
      addorclick: 0,
      replyUser: {},
      delId: 0,
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user.userInfo,
    }),
  },
  methods: {
    pageIn() {
      this.myRequestInfoFN();
      this.searchIsFirend();
    },
    // 获取好友圈子
    async myRequestInfoFN() {
      let _this = this;
      // 获取好友圈子
      const user = await selectUserByUserName(this.query);
      if (user.code != 200) {
        return this.$f7.dialog.alert(user.msg, "提示", function () {
          _this.$f7router.back();
        });
      }
      this.fromUser = user.sysUser;
      this.fromUser.avatar =
        this.fromUser.avatar != ""
          ? "/dev-api" + this.fromUser.avatar
          : require("@/assets/image/author.jpg");
      this.circle = user.myRequestInfo;
    },
    // 查询是否是好友
    searchIsFirend() {
      if (this.isapply) {
        this.showButton = 3;
        return;
      }
      console.log("查询了");
      if (this.user.userId == this.query.usrId) {
        this.showButton = 0;
        return;
      }
      myRequestInfo({
        requestId: this.user.userId,
        buddyId: this.query.usrId,
      }).then((res) => {
        if (res.code != 200) {
          this.$f7.dialog.alert("查询是否好友失败", "提示");
          return;
        }
        if (res.isBuddy == "true") {
          this.showButton = 1;
        } else if (res.isBuddy == "false") {
          this.showButton = 2;
        }
      });
    },
    myspace() {
      this.$f7.popup.open("#myspace");
    },
    addFirend(index) {
      this.$f7router.navigate("/editAddFirend", {
        props: {
          isButton: index,
          firend: this.fromUser,
          accountId: this.accountId,
        },
      });
    },
    applyClick(index) {
      //0.待加入 1.同意 2拒绝
      this.form.id = this.accountId;
      this.form.status = 2;
      this.form.replyAccountId = this.user.userId;
      this.form.replyAccount = this.user.userName;
      this.form.accountId = this.fromUser.userId;
      this.form.requestAccount = this.fromUser.userName;
      this.form.requestAccountName = this.fromUser.nickName;
      updateMyRequestInfo(this.form).then((res) => {
        if (res.code != 200) {
          this.$f7.dialog.alert(res.msg, "提示");
          return;
        }
        let _this = this;
        this.$f7.dialog.alert(res.msg, "提示", function () {
          _this.$f7router.back();
        });
      });
    },
    delUser() {
      this.$f7.dialog.confirm(
        "是否删除用户",
        "提示",
        this.delFn,
        function () {}
      );
    },
    delFn() {
      deleteBuddyInfo(this.delId).then((res) => {
        if (res.code != 200) {
          return this.$f7.dialog.alert(res.msg, "提示");
        }
        this.$f7.popup.close("#userinfor");

        let obj = {
          queryParams: {
            pageNum: 1,
            pageSize: 50,
            requestId: store.state.user.userInfo.userId,
            userName: "",
          },
          isSearch: true,
        };
        store.dispatch("getUserList", obj);
      });
    },
  },
};
</script>

<style scoped lang="scss">
#userinfor {
  box-sizing: border-box;
  background-color: #f7f7f7;
}

.userinfor_head {
  box-sizing: border-box;
  border-bottom: 1px solid #f7f7f7;
  width: 100%;
  height: 20%;
  background-color: #fff;
}

.userinfor_head_img {
  margin-left: 1rem;
  height: 100%;
  width: 20%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
}

.userinfor_head_info {
  margin-left: 1rem;
  width: 60%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;

  .info_box {
    width: 52%;
    height: 50%;

    a {
      font-size: 1.3rem;
      color: #000;
      img {
        width: 20px;
        height: 20px;
      }
    }
    span {
      color: #979797;
      display: block;
    }
  }
}

.iconfont {
  line-height: 26px;
}

.icon {
  display: inline;
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  overflow: hidden;
}
</style>
